<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
		<meta name="renderer" content="webkit" />
		<title>sdEditor富文本编辑器 - 轻量级web富文本编辑器 - 移动端富文本编辑器 - 可视化Html网页编辑器</title>
		<meta name="keywords" content="sdEditor,富文本编辑器,开源html编辑器,可视化html编辑器,移动端富文本编辑器">
		<meta name="description"
			content="sdEditor是一款基于Jquery开发的轻量化、所见即所得的web富文本编辑器，体积小、安全性高、同时支持一个页面多次调用，支持移动端自适应使用。有效过滤XSS攻击，不破坏Html结构。">
		<link rel="stylesheet" href="public/css/ui.css">
		<link rel="stylesheet" href="public/css/style.css">
		<script src="public/js/jquery.js"></script>
		<script src="editor/editor.js"></script>
	</head>

	<body>

		<h1>sdEditor富文本编辑器</h1>
		<div class="ui-demo">
			<div class="ui-tabs ui-tabs-white" data-href="1">
				<ul class="ui-tabs-nav">
					<li class="active"><a href="./">调用方式</a></li>
					<li><a href="./param.html">可选参数</a></li>
					<li><a href="./mode.html">模式演示</a></li>
					<li><a href="./toolbar.html">自定义工具条</a></li>
					<li><a href="./btn.html">自定义按钮</a></li>
					<li><a href="./upload.html">上传演示</a></li>
					<li><a href="./api.html">接口交互</a></li>
				</ul>
				<div class="ui-tabs-content">
					<div class="ui-tabs-pane active">
						<!---->
						<div class="ui-menu ui-menu-blue ui-mt-30 ui-mb-30">
							<div class="ui-menu-name">目录结构</div>
						</div>
						<pre><table>
        <tr>
            <td valign="top">│  editor
│  ├─css
│  │  ├─editor.css
│  │  └─iframe.css
│  ├─font
│  └─editor.js
│  api
│  ├─upload.php
│  └─save.php
│  upload </td>
<td valign="top" class="ui-pl-30">[编辑器核心文件夹]
　　[CSS]
　　[编辑器CSS]
　　[编辑区域CSS]
[字体图标]
[编辑器核心文件]
[接口文件]
　　[上传接口]
　　[保存远程图片接口]
[保存编辑器上传文件]
</td>
      </tr>
    </table></pre>

						<div class="ui-menu ui-menu-blue ui-mb-30">
							<div class="ui-menu-name">调用方法</div>
						</div>
						<div class="ui-timeline">

							<div class="ui-timeline-item">
								<div class="ui-timeline-dot"></div>
								<div class="ui-timeline-title">
									第一步：引用jquery.js，<code>sdEditor</code>是基于jquery开发的，如果页面上没有引用，必须先引用。</div>
								<div class="ui-timeline-text">
									<pre>&lt;script src=&quot;你的路径/jquery.js&quot;&gt;&lt;/script&gt;</pre>
								</div>
							</div>

							<div class="ui-timeline-item">
								<div class="ui-timeline-dot"></div>
								<div class="ui-timeline-title">第二步：引用editor.js</div>
								<div class="ui-timeline-text">
									<pre>&lt;script src=&quot;你的路径/editor/editor.js&quot;&gt;&lt;/script&gt;</pre>
								</div>
							</div>

							<div class="ui-timeline-item">
								<div class="ui-timeline-dot"></div>
								<div class="ui-timeline-title">
									第三步：页面上存在一个<code>div</code>或<code>textarea</code>多行文本框，举例如下：</div>
								<div class="ui-timeline-text">
									<pre>&lt;div id=&quot;<span class="ui-text-red">content</span>&quot;&gt;&lt;/div&gt;</pre>
									或者：
									<pre>&lt;textarea id=&quot;<span class="ui-text-red">content</span>&quot;&gt;&lt;/textarea&gt;</pre>
									<p><span
											class="ui-text-red">提示：</span>推荐使用<code>div</code>元素的方法，<code>sdEditor</code>会自动生成同名的<code>textarea</code>表单元素用于数据同步。
									</p>
								</div>
							</div>

							<div class="ui-timeline-item">
								<div class="ui-timeline-dot"></div>
								<div class="ui-timeline-title">第四步：使用<code>sdEditor</code>初始化调用即可，代码如下：</div>
								<div class="ui-timeline-text">
									<pre>
&lt;script&gt;
$(function()
{
    $(&quot;#<span class="ui-text-red">content</span>&quot;).editor();
});
&lt;/script&gt;</pre>
								</div>
								如果要设置编辑器高度，可以添加<code>height</code>参数，举例如下：
								<pre>$(&quot;#<span class="ui-text-red">content</span>&quot;).editor({<span class="ui-text-red">height</span>:500});</pre>
							</div>

						</div>

						<!---->
					</div>
				</div>
			</div>
		</div>

	</body>
</html>